<template>
	<view class="app-user-collect" :style="[AppSkinVar]">
		<view class="app-user-collect__tab e-flex-xy-center bg-white">
			<view class="app-user-collect__tab-item text-center e-rela e-flex-2 fw-600" @tap="handleSetTabIndex(0)" :class="{ 'is-active': tabIndex === 0 }">
				<text>{{ $t('store.商品') }}</text>
			</view>
			<view class="app-user-collect__tab-item text-center e-rela e-flex-2 fw-600" @tap="handleSetTabIndex(1)" :class="{ 'is-active': tabIndex === 1 }">
				<text>{{ $t('common.店铺') }}</text>
			</view>
		</view>

		<view class="e-p-l-20 e-p-r-20">
			<view class="app-user-collect__header e-flex e-flex-end e-p-r-20" v-show="manageShow">
				<text @tap="isManage = !isManage">{{ $t('common.' + (isManage ? '完成' : '编辑')) }}</text>
			</view>
			<swiper class="app-user-collect__swiper" :current="tabIndex" @change="(e:any) => (tabIndex = e.detail.current)">
				<swiper-item>
					<scroll-view scroll-y @scrolltolower="getData(1)" lower-threshold="60">
						<view class="e-m-b-20" v-for="(item, index) in goodsList" :key="item.id" >
							<goods :info="item" :showRadio="isManage" :checked="selectList.includes(item.id)" :color="AppSkin.primary" @change="handleSelect" ></goods>
						</view>
						<empty :text="$t('user.暂无记录')" icon="/pages/user/static/collect_default.png" height="236rpx" v-if="goodsEmptyShow"></empty>
						<load-more v-else :showLoad="goodsShowLoad"></load-more>
						<view class="app-user-collect__swiper-bottom"></view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y @scrolltolower="getData(2)" lower-threshold="60">
						<view class="e-m-b-20"  v-for="(item, index) in storeList" :key="item.id" >
							<store :info="item" :showRadio="isManage" :checked="selectList.includes(item.id)" :color="AppSkin.primary" @change="handleSelect" ></store>
						</view>
						
						<empty :text="$t('user.暂无记录')" icon="/pages/user/static/collect_default.png" height="236rpx" v-if="storeEmptyShow"></empty>
						<load-more v-else :showLoad="storeShowLoad"></load-more>
						<view class="app-user-collect__swiper-bottom"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="fixed-bottom bg-white" v-show="isManage">
			<view class="app-user-collect__footer e-p-l-38 e-p-r-30 e-flex e-flex-between">
				<view @tap="handleCheckAll">
					<radio class="e-m-r-20" :color="AppSkin.primary" :checked="isAll" @tap.stop="handleCheckAll" />
					<text class="e-font-30">{{ $t('cart.全选') }}</text>
				</view>
				<view class="right-box e-flex">
					<view hover-class="app-hover-class" class="app-user-collect__footer-btn e-flex-xy-center" @tap="handleDel">
						<text>{{ $t('common.删除') }}{{ selectList.length ? `(${selectList.length})` : '' }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
// 所有可被装修选中的页面的混入，用于动态修改标题，例如装修的按钮组组件，按钮的文本为xxx，跳转到对应页面时，会将页面的标题修改为xxx
import layoutPageTitleMixIn from '@/common/mixin/layoutPageTitleMixIn';
export default defineComponent({
	mixins: [layoutPageTitleMixIn]
});
</script>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useCurrentInstance, useQueryPage } from '@/common/hooks';
import goods from './child/goods-card.vue';
import store from './child/store-card.vue';
import { getGoodsCollectList, getStoreCollectList, postDelCollect } from '@/common/request/api';

const ctx = useCurrentInstance();

const tabIndex = ref(0);
const isManage = ref(false);
const selectList = ref<string[]>([]);

const handleSetTabIndex = (type:number) => {
	tabIndex.value = type
	selectList.value = []
}

const {
	showLoad: goodsShowLoad,
	isEmpty: goodsEmptyShow,
	list: goodsList,
	handleQueryPage: handleGoodsQueryPage,
	handleRefresh: handleGoodsRefresh,
	handleUpdate: handleGoodsUpdate
} = useQueryPage({
	api: getGoodsCollectList
});
const {
	showLoad: storeShowLoad,
	isEmpty: storeEmptyShow,
	list: storeList,
	handleQueryPage: handleStoreQueryPage,
	handleRefresh: handleStoreRefresh,
	handleUpdate: handleStoreUpdate
} = useQueryPage({
	api: getStoreCollectList
});

const manageShow = computed(() => tabIndex.value === 0 ? goodsList.length : storeList.length)

const isAll = computed(() => {
	return selectList.value.length ? selectList.value.length === (tabIndex.value === 0 ? goodsList.length : storeList.length) :false;
});

const handleCheckAll = () => {
	if (!isAll.value) {
		if (tabIndex.value === 0) {
			selectList.value = goodsList.map((item) => item.id);
		} else {
			selectList.value = storeList.map((item) => item.id);
		}
		return;
	}
	selectList.value = [];
};

const handleSelect = (id:string) => {
	const index = selectList.value.findIndex(i => i === id)
	if(index > -1){
		selectList.value.splice(index,1)
	}else{
		selectList.value.push(id)
	}
}

const getData = (type: number) => {
	type === 1 ? handleGoodsQueryPage() : handleStoreQueryPage();
};


const handleDel = () => {
	selectList.value.length&&ctx.$showModal({
		content: ctx.$t('user.确定要删除收藏'),
		success: (res) => {
			if (res.confirm) {
				Promise.all(selectList.value.map(targetId => postDelCollect({ targetId }, tabIndex.value === 0 ? 1:2 ))).finally(() => {
					tabIndex.value === 0 ? handleGoodsUpdate() : handleStoreUpdate();
					selectList.value = []
				})
			}
		}
	});
};

onShow(() => {
	handleGoodsRefresh();
	handleStoreRefresh();
});
</script>

<style lang="scss" scoped>
@include appBem_b(user-collect) {
	@include appBem_e(tab) {
		height: 90rpx;
		&-item {
			@include appWhen(active) {
				&::before {
					content: '';
					position: absolute;
					width: 46rpx;
					height: 6rpx;
					background: var(--color-primary);
					border-radius: 3rpx;
					bottom: -24rpx;
					left: calc(50% - 23rpx);
				}
			}
		}
	}
	@include appBem_e(header) {
		height: 88rpx;
	}
	@include appBem_e(swiper) {
		height: calc(100vh - 178rpx);
		&-bottom {
			height: 152rpx;
		}
		scroll-view {
			height: 100%;
		}
	}
	@include appBem_e(footer) {
		height: 112rpx;
		&-btn{
			min-width: 218rpx;
			padding: 0 30rpx;
			height: 80rpx;
			color: #ffffff;
			font-size: 30rpx;
			background: var(--color-primary);
			border-radius: 40rpx;
			
		}
	}
}
</style>
